<template>
  <div class="systemManage">
    <ul class="systemManage-tab clearfix">
      <li
        v-for="(item, index) in options"
        :key="index"
        v-if="item.show"
        :class="{ active: index === activeIndex }"
        @click="selected(item.title, index)"
      >{{item.title}}</li>
    </ul>
    <div class="systemManage-main">
      <div class="systemManage-top clearfix" v-show="!backBtn">
        <div class="systemManage-top-left">{{activeName}}</div>
        <button
          class="systemManage-top-right el-icon-plus"
          @click="add()"
          v-if="activeIndex == 0 && global.powerAllBtn.xtgl.jsxzBtn"
        >新增</button>
        <button
          class="systemManage-top-right el-icon-plus"
          @click="add()"
          v-if="activeIndex == 1 && global.powerAllBtn.xtgl.czryxzBtn"
        >新增</button>
      </div>
      <div class="systemManage-top clearfix" v-show="backBtn">
        <div class="back-left" @click="goBack">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </div>
      </div>
      <!-- 下钻的返回按钮 -->
      <div class="systemManage-top clearfix" v-show="useridlist.length>1">
        <div class="back-left" @click="goBack_xiazuan">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </div>
      </div>
      <!-- 操作人员列表 -->
      <div :class="AddPostShow?'':'systemManage-table'" v-if="activeIndex != 2 && activeIndex != 3">
        <div v-show="activeIndex === 1">
          <el-table
            class="userManage-table"
            :data="userManageData"
            border
            stripe
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="account" label="工号" align="center"></el-table-column>
            <el-table-column prop="telnum" label="联系电话" align="center"></el-table-column>
            <el-table-column prop="department" label="部门" align="center"></el-table-column>
            <el-table-column prop="position" label="岗位" align="center"></el-table-column>
            <el-table-column label="密码重置" align="center" v-if="global.powerAllBtn.xtgl.czryczBtn">
              <template slot-scope="scope">
                <el-button
                  @click="resetPassword(scope.row)"
                  type="text"
                  size="small"
                  v-if="global.powerAllBtn.xtgl.czryczBtn"
                >重置</el-button>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              v-if="global.powerAllBtn.xtgl.czryscBtn || global.powerAllBtn.xtgl.czrybjBtn">
              <template slot-scope="scope">
                <el-button
                  @click="editUser(scope.row)"
                  type="text"
                  size="small"
                  v-if="global.powerAllBtn.xtgl.czrybjBtn"
                >编辑</el-button>
                <el-button
                  @click="delUser(scope.row)"
                  type="text"
                  size="small"
                  class="set-Color"
                  v-if="global.powerAllBtn.xtgl.czryscBtn"
                >删除</el-button>
                <el-button
                  @click="xiazuan(scope.row)"
                  type="text"
                  size="small"
                  v-if="global.powerAllBtn.xtgl.czryscBtn"
                >下钻</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination background layout="total, prev, pager, next, jumper" 
        :total="userTotal" :current-page="userCurrentPage"
         @current-change="userHandleCurrentChange">
          </el-pagination>-->
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="userHandleCurrentChange"
            :current-page="userCurrentPage"
            :page-sizes="[10,20, 30, 50,100]"
            :page-size="userPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userTotal"
            background
          ></el-pagination>
        </div>
        <!-- 岗位角色列表 -->
        <div v-show="activeIndex === 0 && !AddPostShow">
          <el-table
            class="roleManage-table"
            :data="roleManageData"
            border
            stripe
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="department" label="部门" align="center" width="200"></el-table-column>
            <el-table-column prop="position" label="岗位角色" align="center" width="200"></el-table-column>
            <el-table-column label="后台权限" align="center">
              <template slot-scope="scope">
                <span
                  v-for="(item, index) in scope.row.rolelist"
                  :key="index"
                >{{item.powername}}{{scope.row.rolelist.length-1 === index ? '' : '、'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              v-if="global.powerAllBtn.xtgl.jsbjBtn || global.powerAllBtn.xtgl.jsscBtn"
            >
              <template slot-scope="scope">
                <el-button
                  @click="editRole(scope.row)"
                  type="text"
                  size="small"
                  v-if="global.powerAllBtn.xtgl.jsbjBtn"
                >编辑</el-button>
                <el-button
                  @click="delRole(scope.row)"
                  type="text"
                  size="small"
                  class="set-Color"
                  v-if="global.powerAllBtn.xtgl.jsscBtn"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination background layout="total, prev, pager, next, jumper" :total="roleTotal" 
        :current-page="roleCurrentPage" @current-change="roleHandleCurrentChange">
          </el-pagination>-->
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="roleHandleCurrentChange"
            :current-page="roleCurrentPage"
            :page-sizes="[10,20, 30, 50,100]"
            :page-size="rolePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="roleTotal"
            background
          ></el-pagination>

          <!-- <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :total="total"
            :page-sizes="[10, 20, 30, 50, 100]"
            :current-page="form.pagenum"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            background
          ></el-pagination>-->
        </div>
      </div>
    </div>
    <!-- 添加/修改用户对话框 -->
    <el-dialog
      :visible.sync="addUserIsVisible"
      custom-class="addUserDialog"
      width="800px"
      @close="handleCloseUserDialog">
      <div slot="title" style="padding:20px 10px">
        <span class="dialog-title">{{this.manage}}</span>
      </div>
      <el-form :model="addUserForm" ref="addUserForm" label-width="100px" class="addUser-form">
        <div class="addUser-item">
          <span class="input-lable">姓名</span>
          <el-input v-model.trim="addUserForm.name" placeholder="请输入"></el-input>
        </div>
        <div class="addUser-item">
          <span class="input-lable">工号</span>
          <el-input v-model.trim="addUserForm.account" placeholder="请输入" maxlength="20"></el-input>
        </div>
        <div class="addUser-item">
          <span class="input-lable">联系电话</span>
          <el-input v-model.trim="addUserForm.telnum" placeholder="请输入"></el-input>
        </div>
        <div class="addUser-item">
          <span class="input-lable">部门</span>
          <el-select
            v-model="addUserForm.department"
            placeholder="请选择"
            @change="departmentHandChange()"
          >
            <el-option
              v-for="(item, index) in departmentOptions"
              :key="index"
              :label="item.department"
              :value="item.department"
            ></el-option>
          </el-select>
        </div>
        <div class="addUser-item">
          <span class="input-lable">岗位角色</span>
          <el-select v-model="addUserForm.departmentid" placeholder="请选择">
            <el-option
              v-for="item in postOptions"
              :key="item.departmentid"
              :label="item.position"
              :value="item.departmentid"
            ></el-option>
          </el-select>
        </div>
        <div class="addUser-item">
          <span class="input-lable">角色级别</span>
          <el-select v-model="level" placeholder="请选择" @change="handleChangeLevel">
            <el-option
              v-for="item in roleLevelOptions"
              :key="item.type"
              :label="item.title"
              :value="item.type"
            ></el-option>
          </el-select>
        </div>
        <div class="addUser-item">
          <span class="input-lable">权限范围</span>
          <!-- <span class="input-lable">权限范围</span> -->
          <!-- <el-cascader
                  style="width:180px"
                  :options="addressOptions"
                  v-model="regions"
                  :show-all-levels="false"
                  :clearable="true"
                  :props="addressProps"
                  @change="changeCity()"
          ></el-cascader>-->
          <changeCity
            :citys="addUserForm.citys"
            ref="changeCity"
            :level="level"
            @handleChange="handleCityChange"
          ></changeCity>
          <!-- <el-select v-model="addUserForm.departmentid" placeholder="请选择">
            <el-option
              v-for="item in postOptions"
              :key="item.departmentid"
              :label="item.position"
              :value="item.departmentid"
            ></el-option> 
          </el-select>-->
        </div>
      </el-form>
      <div class="dialog-footer">
        <el-button type="info" class="addUser-cancle" @click="cancleUserDialog()">取消</el-button>
        <el-button type="primary" class="addUser-submit" @click="submitUserForm()">提交</el-button>
      </div>
    </el-dialog>
    <!-- 添加/修改岗位角色权限对话框 -->
    <!-- <el-dialog :visible.sync="addRoleIsVisible" width="800px" @close="handleCloseRoleDialog">
      <div slot="title" style="padding:20px 10px">
        <span class="dialog-title">{{this.manage}}</span>
      </div>
      <el-form :model="addRoleForm" ref="addRoleForm" label-width="100px" class="addRole-form">
        <div class="addRole-form-top">
          <div class="addRole-item">
            <span class="input-lable">部门</span>
            <el-input
              v-model="addRoleForm.department"
              placeholder="请输入"
              :disabled="manage === '编辑'? true : false"
            ></el-input>
          </div>
          <div class="addRole-item">
            <span class="input-lable">岗位角色</span>
            <el-input
              v-model="addRoleForm.position"
              placeholder="请输入"
              :disabled="manage === '编辑'? true : false"
            ></el-input>
          </div>
        </div>
        <div class="addRole-form-bottom">
          <span class="input-lable">操作权限</span>
          <div class="authorities">
            <span
              v-for="(item) in authorities"
              :key="item.dictid"
              @click="handClick(item.dictname, item.dictid)"
              :class="{selected: selectedRole.indexOf(item.dictname)>=0}"
            >{{item.dictname}}</span>
          </div>
        </div>
      </el-form>
      <div class="dialog-footer">
        <el-button type="info" class="addUser-cancle" @click="cancleRoleDialog()">取消</el-button>
        <el-button type="primary" class="addUser-submit" @click="submitRoleForm()">提交</el-button>
      </div>
    </el-dialog>-->
    <div v-if="activeIndex == 0">
      <AddPost
        v-if="AddPostShow"
        @back="goBack"
        :allrolelist="allRolelist"
        :currentStatus="currentStatus"
        @callgetpostData="getpostData"
      ></AddPost>
    </div>
  </div>
</template>

<script src="./systemManage.js">
</script>

<style scoped src="./systemManage.css">
</style>

